<template>
	<div class="mapNodeContent">
		<div class="mapNodeContentLine">
			<div class="mapNodeTitle">情报板安全可视化大屏</div>
			<div class="mapBack" @click="mapBackClick">返回</div>
			<div class="mapNodeArea">
				<div class="mapNodeAreaLeft">
					<div class="mapNodeAreaLeft_top">
						<div class="mapNodeAreaLeft_top_left">
							<div class="echartLintBox">
								<div class="echartLintBoxTitle">
									<span></span>
									<span>告警统计</span>
								</div>
								<div class="echartLineArea" id="echartLineWaring"></div>
							</div>
							<div class="echartLintBox">
								<div class="echartLintBoxTitle">
									<span></span>
									<span>防护统计</span>
								</div>
								<div class="echartLineArea" id="echartLineSafe"></div>
							</div>
						</div>
						<div class="mapNodeAreaLeft_top_right" id="mapNodeEchart"></div>
					</div>
					<div class="mapNodeAreaLeft_bottom">
						<div class="echartBarContent">
							<div class="echartLintBoxTitle">
								<span></span>
								<span>内容统计</span>
							</div>
							<div class="echartBarArea" id="echartBarContent"></div>
						</div>
						<div class="cardScrollBox">
							<div class="cardScrollBoxTitle">
								<span></span>
								<span>离线中</span>
							</div>
							<div class="cardScrollBoxArea">
								<CardScroll2 :list="waringList"></CardScroll2>
							</div>
						</div>
						<div class="cardScrollBox">
							<div class="cardScrollBoxTitle">
								<span></span>
								<span>派单中</span>
							</div>
							<div class="cardScrollBoxArea">
								<CardScroll2 :list="operationList"></CardScroll2>
							</div>
						</div>
					</div>
				</div>
				<div class="mapNodeAreaRight">
					<div class="echartBarGather">
						<div class="echartLintBoxTitle">
							<span></span>
							<span>数据汇总</span>
						</div>
						<div class="echartBarGatherArea" id="echartBarGather"></div>
					</div>
					<div class="echartRingTerminal">
						<div class="echartLintBoxTitle">
							<span></span>
							<span>高速终端分布</span>
						</div>
						<div class="echartRingTerminalArea" id="echartRingTerminal"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import * as mapData from "@/assets/json/sichuang.json";
import CardScroll2 from "@/views/common/CardScroll2";
var trainLines = [
	[103.18355462, 30.12134655],
	[103.19271354, 30.18470529],
	[103.23850936, 30.23615431],
	[103.35299916, 30.33501915],
	[103.40795435, 30.37058612],
	[103.41253417, 30.30734703],
	[103.48122838, 30.2796671],
	[103.55908177, 30.25593524],
	[103.62777598, 30.20449655],
	[103.6735721, 30.16491005],
	[103.74226618, 30.153031],
	[103.81553986, 30.13719005],
	[103.90713193, 30.149071],
	[103.9849852, 30.153031],
	[104.13611212, 30.13322941],
	[104.21854497, 30.12530767],
	[104.31929632, 30.15699084],
	[104.32387593, 30.16095053],
]; //火车线路
//火车小图标
var trainPath =
	"path://M807.4 938.5c-139.5-8-250.2-31.7-250.2-173.2v-95.5c0-35.5 72.5-64.3 108-64.3h0.3l0.9-152.4c0-8.5-6.9-15.4-15.4-15.4H373.2c-8.5 0-15.4 6.9-15.4 15.4l0.6 148.7c33.6 2.1 103.8 30 103.8 64.1v95.5c0 142.2-111.8 168.4-252.3 175.3l-0.1 0.3 0.9 71.5c0 8.5 6.9 15.4 15.4 15.4h568.1c8.5 0 15.4-6.9 15.4-15.4l-0.8-69.8-1.4-0.2zM598.2 64.5V18.6c0-8.5-6.9-15.4-15.4-15.4H428.6c-8.5 0-15.4 6.9-15.4 15.4V67C212.1 111.8 61.7 291.3 61.7 506c0 153.6 77 289.2 194.4 370.3l42.7-136.7C236 681 196.7 597.4 196.7 504.7c0-177.4 143.8-321.3 321.3-321.3s321.3 143.8 321.3 321.3c0 97.9-43.8 185.5-112.8 244.5l40.1 127.4C884.2 795.4 961.4 659.7 961.4 506c0-218.8-156.2-401.1-363.2-441.5z";
export default {
	name: "MapNode",
	components: {
		CardScroll2,
	},
	data() {
		return {
			waringList: [
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-005",
				},
			],
			operationList: [
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-005",
				},
			],
		};
	},
	created() {},
	mounted() {
		this.initMapEchart();
		this.initEchartLineWaring();
		this.initEchartLineSafe();
		this.initEchartBarContent();
		this.initEchartBarGather();
		this.initEchartRingTerminal();
	},
	methods: {
		// 返回
		mapBackClick() {
			console.log(JSON.parse(localStorage.getItem("menuArrData")));
			this.$router.push(
				{ path: this.menuDataGo(JSON.parse(localStorage.getItem("menuArrData"))) },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 当前角色要跳转的菜单（菜单数据第一个为true的菜单）
		menuDataGo(arr) {
			for (var i = 0; i < arr.length; i++) {
				if (arr[i].disable == true && arr[i].index != "/mapScreen") {
					return arr[i].index;
				}
			}
		},
		// 告警统计
		initEchartLineWaring() {
			var chartDom = document.getElementById("echartLineWaring");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					backgroundColor: "transparent",
					color: ["#E68F63", "#316BB3"],
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross",
							crossStyle: {
								color: "#999",
							},
							lineStyle: {
								type: "dashed",
							},
						},
					},
					grid: {
						left: "15",
						right: "15",
						bottom: "24",
						top: "75",
						containLabel: true,
					},
					legend: {
						data: ["非法闯入", "敏感字"],
						orient: "horizontal",
						icon: "circle",
						show: true,
						left: "30%",
						top: 15,
						textStyle: {
							color: "#fff",
						},
					},
					xAxis: {
						type: "category",
						interval: 0,
						data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
						axisLabel: {
							textStyle: {
								fontSize: 12,
								color: "#fff",
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							textStyle: {
								fontSize: 12,
								color: "#fff",
							},
							formatter: function (value) {
								var val;
								if (value >= 1000) {
									val = value / 1000 + "k";
								} else if (value < 1000) {
									val = value;
								}
								return val;
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: "#F3F4F4",
							},
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},
					series: [
						{
							name: "非法闯入",
							type: "line",
							smooth: true,
							data: [130, 100, 400, 44, 45, 3220, 760, 40, 44, 45, 322, 76],
						},
						{
							name: "敏感字",
							type: "line",
							smooth: true,
							data: [130, 540, 340, 3440, 350, 5300, 340, 344, 350, 530, 350, 5300],
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 防护统计
		initEchartLineSafe() {
			var chartDom = document.getElementById("echartLineSafe");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					backgroundColor: "transparent",
					color: ["#9E5460", "#5EA47F"],
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross",
							crossStyle: {
								color: "#999",
							},
							lineStyle: {
								type: "dashed",
							},
						},
					},
					grid: {
						left: "15",
						right: "15",
						bottom: "24",
						top: "75",
						containLabel: true,
					},
					legend: {
						data: ["攻击命中", "工单处理"],
						orient: "horizontal",
						icon: "circle",
						show: true,
						left: "30%",
						top: 15,
						textStyle: {
							color: "#fff",
						},
					},
					xAxis: {
						type: "category",
						data: ["6/1/20", "6/2/20", "6/3/20", "6/4/20", "6/5/20", "6/6/20", "6/7/20"],
						axisLabel: {
							textStyle: {
								fontSize: 12,
								color: "#fff",
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							textStyle: {
								fontSize: 12,
								color: "#fff",
							},
							formatter: function (value) {
								var val;
								if (value >= 1000) {
									val = value / 1000 + "k";
								} else if (value < 1000) {
									val = value;
								}
								return val;
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: "#F3F4F4",
							},
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},
					series: [
						{
							name: "攻击命中",
							type: "line",
							smooth: true,
							data: [130, 100, 400, 44, 45, 3220, 760],
						},
						{
							name: "工单处理",
							type: "line",
							smooth: true,
							data: [130, 540, 340, 3440, 350, 5300, 340],
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 内容统计
		initEchartBarContent() {
			var chartDom = document.getElementById("echartBarContent");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					backgroundColor: "transparent",
					grid: {
						top: "15%",
						right: "3%",
						left: "5%",
						bottom: "12%",
					},
					xAxis: [
						{
							type: "category",
							color: "#59588D",
							data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
							axisPointer: {
								type: "line",
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisLabel: {
								margin: 20,
								color: "#fff",
								textStyle: {
									fontSize: 12,
								},
							},
						},
					],
					yAxis: [
						{
							type: "value",
							axisLabel: {
								color: "#fff",
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLine: {
								show: false,
							},
						},
					],
					series: [
						{
							type: "bar",
							data: [100, 90, 10, 90, 90, 20, 56, 89, 90, 10, 90, 90],
							barWidth: "20px",
							itemStyle: {
								normal: {
									label: {
										formatter: "{c}" + "个",
										show: true,
										position: "top",
										textStyle: {
											fontWeight: "bolder",
											fontSize: "12",
											color: "#fff",
										},
									},
									color: new this.$echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[
											{
												offset: 0,
												color: "#3976C4", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "#82AEE6", // 100% 处的颜色
											},
										],
										false
									),
									barBorderRadius: [30, 30, 0, 0],
									shadowBlur: 4,
								},
							},
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 地图
		initMapEchart() {
			this.$echarts.registerMap("sichuang", mapData);
			var chartDom = document.getElementById("mapNodeEchart");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var points = [
					{
						value: [104.065735, 30.659462],
						itemStyle: {
							color: "#f00",
						},
						symbolSize: 12,
					},
					{
						value: [104.773447, 29.352765],
						itemStyle: {
							color: "#0f0",
						},
						symbolSize: 12,
					},
					{
						value: [101.716007, 26.580446],
						itemStyle: {
							color: "#00f",
						},
						symbolSize: 12,
					},
				];
				var option = {
					backgroundColor: "transparent",
					tooltip: {
						trigger: "item",
						formatter: "{c}",
					},
					geo: {
						map: "sichuang",
						//视角缩放比例
						zoom: 1,
						//显示文本样式
						label: {
							normal: {
								show: true,
								textStyle: {
									color: "rgba(255,255,255,1)",
								},
							},
							emphasis: {
								show: true,
								textStyle: {
									color: "#fff", //滑过文字颜色
								},
							},
						},
						layoutSize: "100%",
						layoutCenter: ["55%", "50%"],
						mapLocation: {
							width: "110%",
							height: "97%",
						},
						//鼠标缩放和平移
						roam: false,
						itemStyle: {
							normal: {
								borderColor: "rgba(147, 235, 248, 1)",
								borderWidth: 1,
								areaColor: {
									type: "radial",
									x: 0.5,
									y: 0.5,
									r: 0.8,
									colorStops: [
										{
											offset: 0,
											color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
										},
										{
											offset: 1,
											color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
										},
									],
									globalCoord: false, // 缺省为 false
								},
								shadowColor: "rgba(128, 217, 248, 1)",
								// shadowColor: 'rgba(255, 255, 255, 1)',
								shadowOffsetX: -2,
								shadowOffsetY: 2,
								shadowBlur: 10,
							},
							emphasis: {
								itemStyle: {
									areaColor: "#FFD181",
									borderColor: "#404a59",
									borderWidth: 1,
								},
							},
						},
					},
					series: [
						{
							type: "effectScatter",
							coordinateSystem: "geo",
							data: points,
							showEffectOn: "render",
							hoverAnimation: true,
							rippleEffect: {
								period: 2,
								scale: 5,
								brushType: "stroke",
							},
						},
						{
							type: "lines", //第一条实线
							coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
							polyline: true, // 这表示连线是否为多端点的连线
							data: [
								{
									coords: trainLines,
								},
							],
							lineStyle: {
								color: "#EFBA90",
								width: 3,
							},
							effect: {
								//线特效，小火车
								constantSpeed: 10,
								show: true,
								color: "#00EAFF",
								symbolSize: 15,
								symbol: trainPath,
							},
							progressiveThreshold: 300,
							progressive: 100,
						},
						// {
						// 	type: "lines", //第二条虚线
						// 	coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
						// 	polyline: true, // 这表示连线是否为多端点的连线
						// 	data: [
						// 		{
						// 			coords: trainLines,
						// 		},
						// 	],
						// 	lineStyle: {
						// 		color: "#fff",
						// 		width: 3,
						// 		type: "dashed",
						// 	},
						// 	progressiveThreshold: 300,
						// 	progressive: 100,
						// },
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 数据汇总
		initEchartBarGather() {
			var chartDom = document.getElementById("echartBarGather");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					backgroundColor: "transparent",

					grid: {
						left: "15",
						right: "5",
						bottom: "24",
						top: "45",
						containLabel: true,
					},
					legend: {
						data: ["今日", "总数"],
						icon: "circle",
						show: true,
						left: "40%",
						top: 15,
						textStyle: {
							color: "#fff",
						},
						right: 10,
						itemWidth: 12,
						itemHeight: 10,
					},
					xAxis: {
						type: "category",
						data: ["终端", "离线", "在线", "派单", "告警", "策略"],
						axisLabel: {
							// interval: 0,
							// rotate: 40,
							textStyle: {
								fontFamily: "Microsoft YaHei",
								color: "#fff",
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},

					yAxis: {
						type: "value",
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								fontFamily: "Microsoft YaHei",
								color: "#fff",
								fontSize: 12,
							},
							formatter: function (value) {
								var val;
								if (value >= 1000) {
									val = value / 1000 + "k";
								} else if (value < 1000) {
									val = value;
								}
								return val;
							},
						},
					},

					series: [
						{
							name: "今日",
							type: "bar",
							barWidth: "15%",
							barGap: "1",
							itemStyle: {
								normal: {
									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: "#316AB1",
										},
										{
											offset: 1,
											color: "#1B365C",
										},
									]),
									barBorderRadius: 12,
								},
							},
							data: [4000, 2000, 3000, 3000, 3000, 4000],
						},
						{
							name: "总数",
							type: "bar",
							barWidth: "15%",
							itemStyle: {
								normal: {
									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: "#CFB264",
										},
										{
											offset: 1,
											color: "#3E444D",
										},
									]),
									barBorderRadius: 11,
								},
							},
							data: [4000, 5000, 5000, 5000, 5000, 4000],
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// 高速终端分布
		initEchartRingTerminal() {
			var chartDom = document.getElementById("echartRingTerminal");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					backgroundColor: "transparent",
					// tooltip: {
					// 	trigger: "item",
					// 	formatter: "{b} : {d}% <br/> {c}",
					// },
					title: {
						text: "3246",
						subtext: "终端总数(个)",
						x: "center",
						y: "43%",
						textStyle: {
							fontSize: 28,
							fontWeight: "normal",
							color: "#00FFFF",
						},
						subtextStyle: {
							fontSize: 18,
							fontWeight: "normal",
							align: "center",
							color: "#ddd",
						},
					},
					series: [
						{
							type: "pie",
							radius: ["90", "110"],
							center: ["50%", "50%"],
							color: ["#73C792", "#B86DDF", "#55A3DA", "#FFA800", "#4658F6"],
							itemStyle: {
								normal: {
									borderWidth: 2,
									borderColor: "#031845",
								},
							},
							data: [
								{
									value: 27,
									name: "国家高速",
								},
								{
									value: 30,
									name: "省高速",
								},
								{
									value: 24,
									name: "市高速",
								},
							],
							labelLine: {
								normal: {
									show: true,
									length: 25,
									length2: 25,
									lineStyle: {
										width: 2,
									},
								},
							},
							label: {
								normal: {
									formatter: "{b|{b}}\n{hr|}\n{c|{c}%}",
									rich: {
										b: {
											fontSize: 16,
											color: "#00EDED",
											align: "left",
											padding: 4,
										},
										hr: {
											// borderColor: "#0b5263",
											width: "100%",
											borderWidth: 1,
											height: 0,
										},
										c: {
											fontSize: 16,
											align: "center",
											padding: 4,
											color: "#CBAF63",
										},
									},
								},
							},
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
	},
};
</script>
<style lang="less" scoped>
.mapNodeContent {
	width: 100%;
	height: 100%;
	background-image: url("../../assets/icon/backgroundColor.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	.mapNodeContentLine {
		width: 100%;
		height: 100%;
		background-image: url("../../assets/icon/backgroundLine.png");
		background-size: 98% auto;
		background-position: center 0;
		background-repeat: no-repeat;
		position: relative;
		.mapNodeTitle {
			width: 100%;
			height: 10%;
			font-size: 38px;
			color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.mapBack {
			font-size: 16px;
			color: #fff;
			/*
			padding: 8px 18px;
			background-color: rgba(20, 141, 179, 1);
			border-radius: 6px;
			*/
			position: absolute;
			top: 46px;
			right: 28px;
		}
		.mapBack:hover {
			cursor: pointer;
		}
		.mapNodeArea {
			width: 100%;
			height: 90%;
			padding: 0 18px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.mapNodeAreaLeft {
				width: 75%;
				height: 100%;
				.mapNodeAreaLeft_top {
					width: 100%;
					height: 65%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					.mapNodeAreaLeft_top_left {
						width: 33.33%;
						height: 100%;
						.echartLintBox {
							width: 100%;
							height: 50%;
							.echartLintBoxTitle {
								width: 100%;
								height: 28px;
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: center;
								span {
									display: inline-block;
								}
								span:first-child {
									width: 10px;
									height: 25px;
									background-color: rgba(20, 141, 179, 1);
									border-radius: 20px;
								}
								span:last-child {
									font-size: 16px;
									color: #fff;
									margin: 0 12px;
								}
							}
							.echartLineArea {
								width: 100%;
								height: calc(100% - 28px);
							}
						}
					}
					.mapNodeAreaLeft_top_right {
						width: 66.66%;
						height: 100%;
						#mapNodeEchart {
							width: 100%;
							height: 100%;
						}
					}
				}
				.mapNodeAreaLeft_bottom {
					width: 100%;
					height: 35%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					.echartBarContent {
						width: 46%;
						height: 100%;
						.echartLintBoxTitle {
							width: 100%;
							height: 28px;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							span {
								display: inline-block;
							}
							span:first-child {
								width: 10px;
								height: 25px;
								background-color: rgba(20, 141, 179, 1);
								border-radius: 20px;
							}
							span:last-child {
								font-size: 16px;
								color: #fff;
								margin: 0 12px;
							}
						}
						.echartBarArea {
							width: 100%;
							height: calc(100% - 28px);
						}
					}
					.cardScrollBox {
						width: 27%;
						height: 100%;
						.cardScrollBoxTitle {
							width: 100%;
							height: 28px;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							span {
								display: inline-block;
							}
							span:first-child {
								width: 10px;
								height: 25px;
								background-color: rgba(20, 141, 179, 1);
								border-radius: 20px;
							}
							span:last-child {
								font-size: 16px;
								color: #fff;
								margin: 0 12px;
							}
						}
						.cardScrollBoxArea {
							width: 100%;
							height: calc(100% - 28px - 32px);
							margin-bottom: 32px;
							padding: 12px 12px 0 12px;
							box-sizing: border-box;
						}
					}
				}
			}
			.mapNodeAreaRight {
				width: 25%;
				height: 100%;
				.echartBarGather {
					width: 100%;
					height: 50%;
					.echartLintBoxTitle {
						width: 100%;
						height: 28px;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						span {
							display: inline-block;
						}
						span:first-child {
							width: 10px;
							height: 25px;
							background-color: rgba(20, 141, 179, 1);
							border-radius: 20px;
						}
						span:last-child {
							font-size: 16px;
							color: #fff;
							margin: 0 12px;
						}
					}
					.echartBarGatherArea {
						width: 100%;
						height: calc(100% - 28px);
					}
				}
				.echartRingTerminal {
					width: 100%;
					height: 50%;
					.echartLintBoxTitle {
						width: 100%;
						height: 28px;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						span {
							display: inline-block;
						}
						span:first-child {
							width: 10px;
							height: 25px;
							background-color: rgba(20, 141, 179, 1);
							border-radius: 20px;
						}
						span:last-child {
							font-size: 16px;
							color: #fff;
							margin: 0 12px;
						}
					}
					.echartRingTerminalArea {
						width: 100%;
						height: calc(100% - 28px);
					}
				}
			}
		}
	}
}
</style>
